<template>
  <div v-loading="loading" class="app-container documentation-container">
    <el-card style="margin-bottom: 20px;border: none;" shadow="never">
      <searchAbility ref="search" @searchClick="handleSearchClick" />
    </el-card>
    <el-card shadow="never" style="border: none;">
      <el-table :data="data" style="width: 100%" border :header-cell-style="{background: '#f5f7fa'}">
        <el-table-column prop="username" label="姓名" align="center" />
        <el-table-column label="性别" prop="gender" align="center" :filters="gender" :filter-method="filterHandler">
          <template slot-scope="scope">
            {{ scope.row.gender === 0 ? '女' : (scope.row.gender === 1 ? '男' : '未填写') }}
          </template>
        </el-table-column>
        <el-table-column label="员工身份" prop="userCompany.identity" align="center">
          <template slot-scope="scope">
            {{ scope.row.userCompany?.identity === 0 ? '正式员工' : (scope.row.gender === 1 ? '实习员工' : '试用员工') }}
          </template>
        </el-table-column>
        <el-table-column prop="userCompany.department.name" align="center" label="部门信息" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="register_at" label="入职时间" align="center">
          <template slot-scope="scope">
            {{ setData(scope.row.register_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handlerShow(scope.row)">
              <i class="el-icon-view" /> 补充
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination style="margin-top: 0; padding-bottom: 0;" :total="meta.total" :limit="pageData.paginate" @pagination="pagination" />
    </el-card>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import searchAbility from './searchAbility.vue'
import { replenishEntry } from '@/api/entry'
export default {
  name: 'Documentation',
  components: { Pagination, searchAbility },
  data() {
    return {
      data: [],
      meta: {},
      pageData: {
        paginate: 10,
        page: 1
      },
      searchInfo: {
        gender: '',
        egister_at: '',
        username: ''
      },
      loading: false,
      gender: [{ text: '男', value: 1 }, { text: '女', value: 0 }, { text: '未填写', value: null }]
    }
  },
  created() {

  },
  mounted() {
    const { identity } = this.$route.query
    this.searchInfo.identity = identity
    this.$refs.search.form.identity = identity
    this.replenishEntrys(this.pageData)
  },
  methods: {
    async replenishEntrys() {
      const res = await replenishEntry({ ...this.pageData, ...this.searchInfo })
      this.data = res.data
      this.meta = res.meta
    },
    handleSearchClick(data) {
      this.pageData.page = 1
      this.searchInfo = data
      const params = {
        ...data,
        ...this.pageData
      }
      replenishEntry(params).then(res => {
        this.data = res.data
        this.meta = res.meta
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    handlerShow(data) {
      this.$router.push({
        path: `/personnel-files/show/${data.id}`,
        query: { tag_title: data.username + '-查看' }
      })
    },
    pagination(page) {
      this.pageData.page = page.page
      this.pageData.paginate = page.limit
      this.replenishEntrys()
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    setData(data) {
      return data.match(/^\d{4}-\d{2}-\d{2}/)[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.documentation-container{
  .work-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
}
}

</style>
